import {FC, useEffect, useState} from "react";
import {BookConfig, getBookHotList} from "@/apis/recommend";
import {ApiConstants} from "@/apis/constants";
import {errorMessage} from "@/common/components/Message";
import {RankingBook} from "@/pages/ranking/components/rankingBook";
import "./index.scss"
import {Loading} from "@/common/components/Loading";
/**
 * @Description: 排行榜页面
 * @author zhaojiuyi
 * @date 2023/4/13
 */
export const RankingPage:FC =  () => {

    const [books,setBooks] = useState<BookConfig[]>()

    useEffect(() => {
        const loadData = async function(){
            const {code,data,msg} = await getBookHotList(20)
            if (code !== ApiConstants.SUCCESS){
                return errorMessage(msg)
            }
            setBooks(data)
        }
        loadData()
    },[])

    return books?(
        <div className="ranking">
            {
                books.map((item,index)=> <RankingBook key={item.id} {...item} index={index}/>)
            }
        </div>
    ):(<Loading/>)
}
